<template>
  <el-dialog :visible.sync="currentShowFlag" append-to-body fullscreen :close-on-click-modal="false" :close-on-press-escape="false" @open="handleDialogOpen" @closed="handleDialogClosed">
    <div slot="title" class="detail-dialog__header">{{$t('system_office.detailDialog')}}</div>
    <div>
      <simple-form ref="form" v-model="formModel" :form-field="formField" :grid="{xs: 12, sm: 12, md: 8}" :view-flag="viewFlag"></simple-form>
    </div>
    <div slot="footer">
      <el-button @click="handleDialogClose">{{viewFlag ? $t('operation.close') : $t('operation.cancel')}}</el-button>
      <el-button type="primary" @click="handleDataSubmit" v-if="!viewFlag">{{$t('operation.submit')}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
const BASEURL = {
  update: '/web/sysadmin/ajax.html?sys_method=Update&sys_objName=Sys_Organization',
  get: '/Web/SysAdmin/ajax.html?sys_method=Get&sys_objName=Sys_Organization',
  save: '/Web/SysAdmin/ajax.html?sys_method=Add&sys_objName=Sys_Organization'
}
export default {
  name: 'main_office_detail',
  data () {
    return {
      formModel: { _parent: {}, status: '1' }
    }
  },
  inject: ['handleDataSearch'],
  computed: {
    currentShowFlag: {
      get () { return this.showFlag },
      set (val) { this.$emit('update:showFlag', val) }
    },

    formField () {
      return [
        {
          prop: '_parent.orgname',
          label: this.$t('system_office.parentorg'),
          type: 'Input',
          viewFlag: true,
          hidden: !this.formModel._parent
        },
        {
          prop: 'type',
          label: this.$t('system_office.type'),
          type: 'Select',
          viewFlag: true,
          component: { optionList: this.$getDictList('单位类型') },
          event: {
            change: this.handleTypeChange
          }
        },
        {
          prop: 'category',
          label: this.$t('system_office.category'),
          type: 'Select',
          component: { optionList: this.$getDictList('企业类型') },
          hidden: this.formModel.type !== 'org_type_3',
          rules: {
            trigger: 'change',
            message: this.$t('validate.notSelect'),
            required: true
          }
        },
        {
          prop: 'orgcode',
          label: this.$t('system_office.orgcode'),
          type: 'Input',
          rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
        },
        {
          prop: 'orgname',
          label: this.$t('system_office.orgname'),
          type: 'Input',
          rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
        },
        {
          prop: 'orgfullname',
          label: this.$t('system_office.orgfullname'),
          type: 'Input',
          rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
        },
        {
          prop: 'phone',
          label: this.$t('system_office.phone'),
          type: 'Input'
        },
        {
          prop: 'address',
          label: this.$t('system_office.address'),
          col: { xs: 12, sm: 12, md: 16 },
          type: 'Input'
        },
        {
          prop: 'status',
          label: this.$t('system_office.status'),
          type: 'Select',
          viewFlag: true,
          component: { optionList: this.$getDictList('状态') },
          rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
        }
        // {
        //   prop: 'remarks',
        //   label: this.$t('field.remarks'),
        //   type: 'Input',
        //   component: { type: 'textarea' },
        //   col: { xs: 24, sm: 24, md: 24 }
        // }
      ]
    }
  },
  props: {
    showFlag: { type: Boolean, default: false },
    viewFlag: { type: Boolean },
    detailData: { type: Object },
    extData: { type: Object }
  },
  methods: {
    handleDialogClose () {
      this.currentShowFlag = false
    },

    handleDataSubmit () {
      this.$refs.form.$refs.simpleForm.validate(status => {
        if (status) {
          let loadingFlag = this.$loading({ target: this.$el.querySelector('.el-dialog') })

          let submitModel = this.$_.cloneDeep(this.formModel)
          if (submitModel._parent) {
            submitModel.parentorgid = submitModel._parent.orgid
            submitModel.parentorgids = (submitModel._parent.parentorgids ? submitModel._parent.parentorgids + ',' : '') + submitModel._parent.orgid

            delete submitModel._parent
          }
          Object.assign(submitModel, { sys_mid: this.extData.sys_mid })

          this.$axios
            .post(this.detailData.orgid ? BASEURL.update : BASEURL.save, submitModel)
            .then(resp => {
              this.currentShowFlag = false
              this.$message({ type: 'success', message: this.$t('tip.saveSuccess') })
              this.handleDataSearch()
            })
            .finally(() => {
              loadingFlag.close()
            })
        }
      })
    },

    handleDialogOpen () {
      if (!this.detailData.orgid) {
        let parentLevel = this.detailData._parent.parentorgids ? this.detailData._parent.parentorgids.split(',').length : 0

        let cacheOrgType = ''
        if (parentLevel === 0) cacheOrgType = 'org_type_2'
        else if (parentLevel === 1) cacheOrgType = 'org_type_3'

        this.$set(this.formModel, 'type', cacheOrgType)
        this.$set(this.formModel, '_parent', this.detailData._parent)
        return
      }

      delete this.detailData.children
      this.$set(this, 'formModel', this.detailData)
    },

    /**
     * 变更单位类型
     * 企业类型字段只有在单位类型为 单位下属企业(sys_office_category_3) 时才会显示
     */
    handleTypeChange (val) {
      delete this.formModel.category
    },

    handleDialogClosed () {
      this.$refs.form.resetFields()
      this.formModel = { _parent: {}, status: '1' }
    }
  }
}
</script>
